<table cellpadding="2" cellspacing="1" width="100%" class="list-div">
    <tr>
    	<td class="content_left">接口名称</td>
        <td class="content_right"><input type="text" id="api_name" style="width:200px;" value="<{$data.name}>" /></td>
   	</tr>
    <tr>
    	<td class="content_left">接口函数</td>
        <td class="content_right"><input type="text" id="api_fun" style="width:200px;" value="<{$data.fun}>"/></td>
  </tr>
   <tr>
    	<td class="content_left">接口类型</td>
        <td class="content_right"><input type="text" style="width:200px;" disabled="disabled" value="<{$api_type[$type]}>" /></td>
  </tr>
    <tr>
    	<td class="content_left">接口描述</td>
        <td class="content_right"><input type="text" id="api_desc" style="width:500px;" value="<{$data.desc}>"/></td>
  </tr>
    <tr>
      <td valign="top" class="content_left">接口站点</td>
      <td class="content_right">
      	<select id="api_site">
        <option value="0">所有站点</option>
        <{foreach from=$site_name item=v key=k}>
        <option value="<{$k}>"<{if $detail_data[0].sid==$k}> selected="selected"<{/if}>><{$v}></option>
        <{/foreach}>
        </select>&nbsp;&nbsp;&nbsp;
        [<a href="javascript:addSite();">增加</a>]
        </td>
    </tr>
    <tr>
    	<td valign="top" class="content_left">接口详细</td>
        <td class="content_right"><textarea id="api_site_detail" style="width:500px;height:200px;"><{$detail_data[0].detail}></textarea></td>
  </tr>
  <tr id="append">
    	<td class="content_left"></td>
        <td class="content_right"><input id="sub" type="button" onClick="subFun()" value=" 提 交 " /></td>
  </tr>
</table>
<input type="hidden" id="tid" value="<{$tid}>" />
<input type="hidden" id="api_type" value="<{$type}>" />

<script type="text/javascript">
var tid;
$(function(){
	tid = parseInt($("#tid").val());
})

function subFun(){
	var name = $("#api_name").val();
	var fun = $("#api_fun").val();
	var type = $("#api_type").val();
	var desc = $("#api_desc").val();

	
	
	if( !name || !fun ){
		alert('接口名称、接口函数及接口类型不能为空！');
		return;
	}
	
	var siteErr = false;
	var siteNum = $("#content select").size();
	var site = [], detail = [];
	
	$("#content select").each(function(){
		var v = $(this).val();
		var id = $(this).attr('id')
		
		site.push( v );
		detail.push( $("#"+id+"_detail").val() );
		
		if( siteNum > 1 && v == 0 ){
			if( !siteErr ) alert('有多个站点时“接口站点”不能选择“所有站点”！');
			siteErr = true;
		}
	})

	if( siteErr ) return;

	var r = isHadSome( site );
	if( r ){
		alert('不能选择两个相同的“接口站点”！');
		return;	
	}
	
	var obj = {tid:tid,name:name,fun:fun,type:type,desc:desc,site:site.join(","),detail:detail.join("*|*|*")};
	tid > 0 ? _edit( tid, obj ) : _add( obj );
	
	$("#sub").attr('disabled','disabled');
}

function _add( obj ){
	$.post('?action=add&r='+Math.random(),obj,function(data){
		if(data == 1 ){
			alert('添加接口成功！');
			window.location.reload();
		}else{
			alert('添加接口失败！');	
			$("#sub").removeAttr('disabled');	
		}
	})
}

function _edit( tid, obj ){
	$.post('?action=edit&r='+Math.random(),obj,function(data){
		if(data == 1 ){
			alert('编辑接口成功！');
			show( tid );
		}else{
			alert('编辑接口失败！');	
			$("#sub").removeAttr('disabled');	
		}
	})
}

//note 添加站点
function addSite(){
	var str = getAppend( 0, '' );	
	$("#append").before( str );
}

//note 追加内容
function getAppend( sid, detail ){
	var r = Date.now()+"_"+Math.ceil(1000*Math.random());
	
	var s = $("#api_site").html();
	s = s.replace('selected="selected"', '');
	if( sid ) s = s.replace('value="'+sid+'"', 'value="'+sid+'" selected="selected"');
	
	var appendStr = '<tr id="tr_'+r+'_1"><td valign="top" class="content_left">接口站点</td><td class="content_right"><select id="api_site_'+r+'">';	
	appendStr += s;
	appendStr += '</select>&nbsp;&nbsp;&nbsp;';
	appendStr += '[<a href="javascript:remove(\''+r+'\');">移除</a>]</td></tr>';
	appendStr += '<tr id="tr_'+r+'_2"><td valign="top" class="content_left">接口详细</td><td class="content_right">';
	appendStr += '<textarea id="api_site_'+r+'_detail" style="width:500px;height:200px;">'+detail+'</textarea></td></tr>';	
	return appendStr;
}

function remove( r ){
	$("#tr_"+r+"_1").remove();
	$("#tr_"+r+"_2").remove();
}

//note 判断数据中是否有相同的值
function isHadSome( arr ){
	var len = arr.length;
	for( var i = 0; i < len; i++ ){
		for( var j = i+1; j < len; j++ ){
			if( arr[i] == arr[j] )	return true;
		}
	}
	return false;
}

</script>




<!---->
<{foreach from=$detail_data item=v key=k}>
<textarea id="detail_<{$v.sid}>" style="display:none;"><{$v.detail}></textarea>
<{if $k>0 && $tid >0}>
<script type="text/javascript">
var str = getAppend( <{$v.sid}>, $("#detail_<{$v.sid}>").val());
$("#append").before( str );
</script>
<{/if}>
<{/foreach}>